<template>
	<view class="rd-short yb-flex">
		<video
		loop
		enable-danmu
		:show-center-play-btn="false"
		ref="video"
		class="yb-flex-1"
		:danmu-list="params.barrages"
		:src="params.src"
		:controls="false"
		@play="onplay"
		@pause="onpause"
		@timeupdate="ontimeupdate"
		@tap="pause"></video>
		<image :style="{
			opacity: isInit ? 1 : 0
		}" class="cover" :src="params.cover" mode="aspectFit"></image>
		<view class="mask"></view>
		<view class="progress yb-flex yb-row">
			<view :style="{
				'background-color': skinColor.color_orange,
				width: progress + 'px'
			}"></view>
		</view>
		<view class="pause yb-flex yb-align-center yb-justify-center" v-if="isPause && params.src && !isInit" @tap="play">
			<rd-icon name="tv-play-fill" :size="150" color="rgba(255,255,255,.5)"></rd-icon>
		</view>
		<view class="bottom-info yb-flex padding-gap">
			<yb-text :lines="1" custom-style="margin-bottom: 10rpx" :size="30" :color="skinColor.color_white" :value="'@' + (params.creator || app.$business.filterSource(params.source).title)" />
			<view class="yb-flex yb-row yb-wrap">
				<yb-tap v-for="(tag, i) in params.tag" :key="i" stop @click="app.$business.showTaglist(tag, params.type)">
					<yb-tag :options="{
						bgColor: app.$utils.hex2rgba(skinColor.color_white, .8),
						color: 'rgba(0,0,0,.5)'
					}" custom-style="margin-right: 10rpx;margin-bottom: 10rpx" :value="tag"></yb-tag>
				</yb-tap>
			</view>
			<yb-text v-if="params.title" :lines="1" custom-style="margin-top: 10rpx" :size="30" :color="app.$utils.hex2rgba(skinColor.color_white, .8)" :value="params.title" />
		</view>
		<view class="detail yb-flex yb-align-center" v-if="!params.vertical">
			<yb-button :options="{
				bgColor: skinColor.color_white,
				size: '26rpx'
			}" custom-class="detail-btn" plain value="点击进入详情页"></yb-button>
		</view>
		<view class="right-menu padding-gap yb-flex yb-justify-between">
			<view class="menu" @tap="showCharacter">
				<yb-avatar
				:src="params.avatar || app.$business.filterSource(params.source).logo || '/static/logo.png'"
				:size="80"
				custom-class="menu-avatar"
				:custom-style="{
					'border-color': skinColor.color_orange,
					'background-color': skinColor.color_white
				}"></yb-avatar>
			</view>
			<view class="menu yb-flex yb-align-center">
				<rd-icon name="thumbs-fill" :size="70" :color="skinColor.color_white"></rd-icon>
				<text class="menu-text" :style="{color: skinColor.color_white}">1{{app.$utils.numtounit(params.thumbs)}}</text>
			</view>
			<view class="menu yb-flex yb-align-center" @tap="app.$business.toCollection(params)">
				<rd-icon name="love-fill" :size="70" :color="app.$business.isCollection(params.id) ? skinColor.color_red : skinColor.color_white"></rd-icon>
				<text class="menu-text" :style="{color: skinColor.color_white}">{{app.$utils.numtounit(params.collect) || '收藏'}}</text>
			</view>
			<view class="menu yb-flex yb-align-center" @tap="app.$business.showComment(params)">
				<rd-icon name="comment-fill" :size="70" :color="skinColor.color_white"></rd-icon>
				<text class="menu-text" :style="{color: skinColor.color_white}">{{app.$utils.numtounit(params.comment) || '评论'}}</text>
			</view>
			<view class="menu yb-flex yb-align-center" @tap="app.$business.shareWeb(params)">
				<rd-icon name="share-fill" :size="70" :color="skinColor.color_white"></rd-icon>
				<text class="menu-text" :style="{color: skinColor.color_white}">分享</text>
			</view>
		</view>
		<view class="short-loading-box yb-flex yb-align-center yb-justify-center" v-if="loading">
			<yb-loading :visible="loading" :color="skinColor.color_white" :size="80"></yb-loading>
		</view>
		<rd-characters :visible.sync="characterShow" :list="params.characters"></rd-characters>
	</view>	
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			progress () {
				return this.windowWidth * (this.currentTime / this.duration)
			}
		},
		data () {
			return {
				params: {},
				loading: true,
				isInit: true,
				isPause: true,
				duration: 0,
				currentTime: 0,
				windowWidth: 0,
				characterShow: false
			}
		},
		created() {
			this.params = this.item
			this.windowWidth = uni.getSystemInfoSync().windowWidth
		},
		mounted() {
			this.$nextTick(function () {
				setTimeout(() => {
					if ( this.params.id ) this.getDetail(this.params)
				}, 500)
			})
		},
		beforeDestroy() {
			this.stop()
		},
		methods: {
			play () {
				this.$refs.video && this.$refs.video.play()
			},
			pause () {
				this.$refs.video && this.$refs.video.pause()
			},
			stop () {
				this.$refs.video && this.$refs.video.stop()
			},
			onplay () {
				this.isPause = false
				this.isInit = false
				this.loading = false
			},
			onpause () {
				this.isPause = true
				this.loading = false
			},
			ontimeupdate (e) {
				this.currentTime = parseFloat(e.detail.currentTime) || 0
				this.duration = parseFloat(e.detail.duration) || 0
			},
			getDetail (params) {
				if ( params.sections.length > 0 && params.sections[0].src  ) {
					let tag = this.app.$business.getTag(params)
					params.tag = [...new Set(params.tag.concat(tag))]
					params.src = params.sections[0].src || params.src
					params.cover = params.sections[0].cvoer || params.cover
					params.barrages = params.sections[0].barrages.length > 0 ? params.sections[0].barrages : params.barrages
					params.title = params.sections[0].title || params.title
					if ( params.src && this.visible ) {
						this.$nextTick(function () {
							this.play()
						})
					}
				} else {
					this.app.$api.getSingleDetail(params).then(res => {
						let sections = []
						if ( res.code == this.app.$config.ERR_OK ) {
							params = Object.assign({}, params, res.data.data)
							sections = res.data.sections || []
						}
						if ( !params.shareUrl ) params.shareUrl = res.requestUrl
						if ( sections.length == 0 ) sections = params.sections
						let tag = this.app.$business.getTag(params)
						params.tag = [...new Set(params.tag.concat(tag))]
						if ( sections.length > 0 ) {
							let player = sections[0]
							this.app.$api.getSectionDetail(Object.assign({}, player, {
								type: params.type
							})).then(ret => {
								player = Object.assign({}, player, ret.data.data)
								params.src = player.src || params.src
								params.cover = player.cvoer || params.cover
								params.barrages = player.barrages.length > 0 ? player.barrages : params.barrages
								params.title = player.title || params.title
								if ( params.src && this.visible ) {
									this.$nextTick(function () {
										this.play()
									})
								}
							})
						} else {
							uni.showToast({
								title: '视频加载失败',
								icon: 'none'
							})
						}
					})
				}
			},
			showCharacter () {
				this.characterShow = true
			}
		},
		watch: {
			item (newVal) {
				this.params = Object.assign({}, newVal, this.params)
				if ( this.params.id ) this.getDetail(this.params)
			},
			visible (newVal) {
				if ( newVal ) {
					if ( this.params.src ) {
						this.$nextTick(function () {
							this.play()
						})
					}
				} else {
					this.pause()
				}
			}
		}
	}
</script>

<style>
	.rd-short .cover {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity .3s;
	}
	.rd-short .mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.2);
	}
	.rd-short .progress {
		height: 3rpx;
		background-color: rgba(255,255,255,.4);
	}
	.rd-short .pause {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.rd-short .bottom-info {
		position: absolute;
		bottom: 50rpx;
		left: 0;
		right: 200rpx;
	}
	.rd-short .detail {
		position: absolute;
		bottom: 350rpx;
		left: 0;
		right: 0;
	}
	.rd-short .detail-btn {
		height: 60rpx;
	}
	.rd-short .right-menu {
		position: absolute;
		right: 0;
		height: 650rpx;
		bottom: 150rpx;
	}
	.rd-short .menu-avatar {
		border-width: 5rpx;
		border-style: solid;
		border-radius: 80rpx;
	}
	.rd-short .menu-text {
		font-size: 20rpx;
		margin-top: 10rpx;
	}
	.rd-short .short-loading-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>